/**
 * Created by 86185 in 2020/8/28 on 21:41
 */
import React from "react"

import "@/components/PlaceCount/PlaceCount.component.styl"

import PieDoughnutChart from "@/components/common/PieDoughnutChart/PieDoughnutChart.component"
import BarChar from "@/components/common/BarChar/BarChar.component"

class PlaceCount extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pieDoughnutData: {
                id: "place-count",
                seriesName: "客源地统计",
                seriesData: [
                    {value: 335, name: "省内", itemStyle: {color: "#02CDE6"}},
                    {value: 310, name: "省外", itemStyle: {color: "#e8b92b"}},
                ]
            },
            barData: {
                id: "place-count",
                yName: "客源地统计  (top5)",
                seriesName: "客源地统计  (top5)",
                yData: ["贵阳", "遵义", "黔东南", "黔南", "六盘水"],
                seriesData: [2200, 1820, 1910, 2340, 2900]
            }
        }
    }

    render() {
        return (
            <div className="place-count">
                <div className="icon">
                    <i className="icon-1 fa fa-chevron-up"></i>
                    <i className="icon-2 fa fa-chevron-up"></i>
                    <i className="icon-3 fa fa-chevron-up"></i>
                    <i className="icon-4 fa fa-chevron-up"></i>
                </div>
                <div className="title">
                    <i className="left-icon fa fa-angle-right">
                        <i className="fa fa-angle-right"></i>
                    </i>
                    <span className="text">客源地统计</span>
                    <i className="right-icon fa fa-angle-left">
                        <i className="fa fa-angle-left"></i>
                    </i>
                </div>
                <div className="chart">
                    <div className="pie">
                        <PieDoughnutChart pieDoughnutData={this.state.pieDoughnutData}></PieDoughnutChart>
                    </div>
                    <div className="bar">
                        <BarChar barData={this.state.barData}></BarChar>
                    </div>
                </div>
            </div>
        );
    }
}

export default PlaceCount